/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  UploadOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  DatePicker,
  Input,
  Select,
  Switch,
  Tooltip,
  message,
  InputNumber,
  Modal,
  AutoComplete,
} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile, { urlParse } from '@/utils/utils';
import Customer from '../../components/Customer';
import styles from './style.less';
import StandardTable from '@/components/StandardTable';
import BatchUpload from './BatchUpload';
import HOCSelect from '@/components/AntDesign/Select';

const { confirm } = Modal;
const { Option } = Select;
const { TextArea, Search } = Input;
const FormItem = Form.Item;
const { MonthPicker } = DatePicker;

@connect(({ loading, oncechargecs }) => ({
  loading: loading.models.oncechargecs,
  product: oncechargecs.product, // 产品下拉
  empDataList: oncechargecs.empDataList, // 员工明细数据源
  empNameList: oncechargecs.empNameList,
  onceFeeCustDraftId: oncechargecs.onceFeeCustDraftId,
}))
@Form.create()
class AdvancedForm extends PureComponent {
  // 组件内所有数据的初始状态
  state = {
    isTableShow: false, // 选择开关
    feeWayid: '', // 是否显示收费年月
    ONCE_FEE_WAY: [],
    contList: [],
    tableBlock: true,
    nowPage: 1,
    pageNum: 10,
    custIdid: null,
    pdIdid: null,
    custContIdid: null,
    productData: {},
    onceFeeNo: null,
    isFlag: null,
    selectedRows: [],
    selectedRowKeys: [],
    idType: 1,
    onceChargeData: {}, // 回显数据
  };

  componentDidMount() {
    const { dispatch, form, location } = this.props;
    const tempUrl = location.search;
    const { onceFeeId } = urlParse(tempUrl);
    const { nowPage, pageNum } = this.state;
    dispatch({
      type: 'oncechargecs/updateModelData',
      payload: { onceFeeCustDraftId: null },
    });
    // 获取字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['ONCE_FEE_WAY', 'ADD_ID_TYPE'],
      callback: res => {
        this.setState({
          ONCE_FEE_WAY: res.ONCE_FEE_WAY,
        });
      },
    });
    dispatch({
      type: 'oncechargecs/fetchCustUpdateData',
      payload: { onceFeeId },
    }).then(res => {
      if (res.success) {
        res.data.busiYm = `${`${res.data.busiYm}`.substring(0, 4)}-${`${res.data.busiYm}`.substring(
          4
        )}`;
        if (res.data.feeYm) {
          res.data.feeYm = `${`${res.data.feeYm}`.substring(0, 4)}-${`${res.data.feeYm}`.substring(
            4
          )}`;
        }
        dispatch({
          type: 'oncechargecs/updateModelData',
          payload: { onceFeeCustDraftId: res.data && res.data.onceFeeCustDraftId },
        });
        this.setState({
          onceFeeNo: res.data.onceFeeNo,
          pdIdid: res.data.pdId,
          feeWayid: res.data.feeWay,
          custContIdid: res.data.custContId,
          custIdid: res.data.custId,
          isFlag: res.data.flag,
          custId: res.data.custId,
          onceChargeData: res.data,
        });

        // 获取供应商合同
        dispatch({
          type: 'oncechargecs/getCustcontList',
          payload: { custId: res.data.custId },
        }).then(resp => {
          if (resp.success && resp.data.length) {
            this.setState({ contList: resp.data });
          } else {
            this.setState({ contList: [] });
          }
        });

        const getFieldsList = form.getFieldsValue();
        Object.keys(getFieldsList).forEach(key => {
          if (res.data[key]) {
            if (key === 'feeWay') {
              form.setFieldsValue({ [key]: res.data.feeWayName });
            } else if (key === 'pdId') {
              form.setFieldsValue({ [key]: res.data.pdName });
            } else if (key === 'custId') {
              form.setFieldsValue({ [key]: res.data.custName });
            } else if (key === 'custContId') {
              form.setFieldsValue({ [key]: res.data.custContName });
            } else if (key === 'busiYm') {
              form.setFieldsValue({ busiYm: moment(res.data.busiYm) });
            } else if (key === 'feeYm') {
              form.setFieldsValue({ feeYm: moment(res.data.feeYm) });
            } else {
              form.setFieldsValue({ [key]: res.data[key] });
            }
          }
        });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
      const pladta = {
        pageArg: { currentPage: nowPage, pageSize: pageNum },
        onceFeeCustDraftId:
          (res.data && res.data.onceFeeCustDraftId && res.data.onceFeeCustDraftId) || null,
      };
      dispatch({
        type: 'oncechargecs/geteEmpList',
        payload: pladta,
      });
    });

    // 获取产品下拉
    dispatch({
      type: 'oncechargecs/getProductList',
      payload: {},
    });
  }

  // 选择开关
  changeSwitch = checked => {
    const { onceFeeCustDraftId } = this.props;
    const { nowPage, pageNum } = this.state;
    this.setState({ isTableShow: checked });
    if (checked) {
      this.getList(nowPage, pageNum, onceFeeCustDraftId);
    }
  };

  // 删除
  delLsit = record => {
    const { dispatch, onceFeeCustDraftId } = this.props;
    const that = this;
    confirm({
      icon: <QuestionCircleOutlined />,
      title: '你确定要删除此条数据吗？',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk() {
        dispatch({
          type: 'oncechargecs/deleteData',
          payload: { onceFeeCustDetDraftId: record.onceFeeCustDetDraftId },
        }).then(res => {
          if (res.success) {
            const { nowPage, pageNum } = that.state;
            that.getList(nowPage, pageNum, onceFeeCustDraftId);
            that.setState({ nowPage });
            message.success('删除成功！');
          } else {
            message.warning(res.message || '删除失败');
          }
        });
      },
      onCancel() {
        that.setState({ selectedRowKeys: [], selectedRows: [] });
      },
    });
  };

  // 取消
  cancel = () => {
    router.push('/chargemanage/onebilling/index');
  };

  // 表单检测 并 提交
  submitAll = () => {
    const { form, dispatch, onceFeeCustDraftId } = this.props;
    const { onceFeeNo, pdIdid, feeWayid, custIdid, custContIdid } = this.state;
    const getFieldsList = form.getFieldsValue();
    let submitData = {};
    form.validateFieldsAndScroll(
      +feeWayid === 2
        ? ['pdId', 'feeWay', 'custId', 'feeAmo', 'custContId', 'busiYm', 'feeYm']
        : ['pdId', 'feeWay', 'custId', 'feeAmo', 'busiYm'],
      (err, values) => {
        if (!err) {
          const busiYm = values.busiYm.format('YYYYMM');
          submitData = {
            onceFeeCustDraftId,
            onceFeeId: onceFeeNo,
            pdId: pdIdid,
            feeWay: feeWayid,
            custId: custIdid,
            custContId: custContIdid || values.custContId,
            busiYm,
            remark: getFieldsList.remark,
            feeAmo: values.feeAmo,
          };
          if (values.feeYm) {
            const feeDay = values.feeYm.format('YYYYMM');
            submitData.feeYm = feeDay;
          }
          if (String(values.feeAmo) === '0') {
            message.warning('收费总金额不能为 0 ');
            return;
          }
          dispatch({
            type: 'oncechargecs/updateSubmit',
            payload: submitData,
          }).then(res => {
            if (res.success) {
              message.success('修改成功！');
              router.push('/chargemanage/onebilling/index');
            } else {
              message.warning(res.message || '修改失败！');
            }
          });
        }
      }
    );
  };

  // 点击上传
  uploadFile = () => {
    const { form, dispatch, onceFeeCustDraftId } = this.props;
    const { chargeType, pdIdid, feeWayid, custIdid, custContIdid } = this.state;
    const getFieldsList = form.getFieldsValue();
    let errorInfo = false;
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdId', 'feeWay', 'custId', 'feeAmo', 'busiYm', 'custContId', 'feeYm']
        : ['pdId', 'feeWay', 'custId', 'feeAmo', 'busiYm', 'custContId'],
      err => {
        errorInfo = !err;
        if (!err) {
          this.setState({
            tableBlock: false,
          });
          let feeYm = null;
          if (+chargeType === 2) {
            feeYm = getFieldsList.feeYm ? getFieldsList.feeYm.format('YYYYMM') : null;
          }
          dispatch({
            type: 'oncechargecs/updateModelData',
            payload: {
              batchQuery: {
                onceFeeCustDraftId,
                pdId: pdIdid || null,
                feeWay: feeWayid || null,
                custId: custIdid || null,
                custContId: custContIdid || null,
                busiYm: getFieldsList.busiYm ? getFieldsList.busiYm.format('YYYYMM') : null,
                feeYm,
              },
            },
          });
          dispatch({
            type: 'oncechargecs/getDownloadInfo',
            payload: {
              pdId: pdIdid,
            },
          });
        }
      }
    );
    return errorInfo;
  };

  // 点击新增
  Updownadd = () => {
    const { form, onceFeeCustDraftId } = this.props;
    const { pdIdid, feeWayid, custIdid, custContIdid, chargeType } = this.state;
    this.handleModalVisible(true);
    const getFieldsList = form.getFieldsValue();
    const product = {
      pdId: pdIdid,
      feeWay: feeWayid,
      custId: custIdid,
      custContId: custContIdid,
      onceFeeCustDraftId,
    };
    if (+chargeType === 2) {
      product.feeYm = getFieldsList.feeYm.format('YYYYMM');
    }
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdId', 'feeWay', 'custId', 'feeAmo', 'busiYm', 'custContId', 'feeYm']
        : ['pdId', 'feeWay', 'custId', 'feeAmo', 'busiYm', 'custContId'],
      err => {
        if (!err) {
          this.setState({
            productData: product,
          });
          this.handleModalVisible(true);
        }
      }
    );
  };

  // 切换模态框：新增
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 取消关闭模态框
  cancelModal = () => {
    this.handleModalVisible(false);
    this.setState({ selectedRowKeys: [] });
  };

  // 点击关闭
  Close = () => {
    this.setState({
      tableBlock: true,
    });
  };

  // 获取员工列表
  getList = (Page, pageNum, onceFeeCustDraftId) => {
    const { dispatch } = this.props;
    const pageArg = {
      currentPage: Page,
      pageSize: pageNum,
    };
    const pladta = {
      pageArg,
      onceFeeCustDraftId,
    };
    dispatch({
      type: 'oncechargecs/geteEmpList',
      payload: pladta,
    });
  };

  // 姓名模糊查询
  searchEmpName = value => {
    const { dispatch } = this.props;
    const { custId } = this.state;
    if (value.trim().length) {
      dispatch({
        type: 'oncechargecs/fetchEmpNameList',
        payload: {
          empName: value,
          custId,
        },
      });
    }
  };

  // 选择姓名
  selectEmpName = value => {
    const { empNameList, form } = this.props;
    empNameList.map(item => {
      if (item.empId === value.key) {
        form.setFieldsValue({ idnoNumber: item.idCode });
        this.setState({ idType: item.idType });
      }
    });
  };

  // 输入证件号查询名字
  searchIdCode = value => {
    const { dispatch, form } = this.props;
    const { custId } = this.state;
    form.resetFields(['moName']);
    dispatch({
      type: 'oncechargecs/fetchEmpNameList',
      payload: {
        idCode: value,
        custId,
      },
    }).then(data => {
      if (data.length) {
        data.map(item => {
          if (item.idCode === value) {
            form.setFieldsValue({ moName: { key: item.empId, label: item.empName } });
            this.setState({ idType: item.idType });
          }
        });
      }
    });
  };

  // 下载模板
  downtemplte = () => {
    const { dispatch } = this.props;
    const { pdIdid } = this.state;
    dispatch({
      type: 'oncechargecs/download',
      payload: {
        pdId: pdIdid,
      },
    }).then(res => {
      const fileInfo = res.data.split('|');
      downloadFile({ fileId: fileInfo[0], fileName: fileInfo[1] });
    });
  };

  // 复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRowKeys, selectedRows });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { onceFeeCustDraftId } = this.props;
    this.getList(pagination.current, pagination.pageSize, onceFeeCustDraftId);
  };

  // 点击完成
  complete = () => {
    const { dispatch, onceFeeCustDraftId } = this.props;
    const { nowPage, pageNum } = this.state;
    this.setState({
      tableBlock: true,
    });
    dispatch({
      type: 'oncechargecs/updateModelData',
      payload: { currentStep: 0 },
    });
    this.getList(nowPage, pageNum, onceFeeCustDraftId);
  };

  onceFee = onceFeeCustDraftId => {
    const { dispatch } = this.props;
    const { nowPage, pageNum } = this.state;
    dispatch({
      type: 'oncechargecs/updateModelData',
      payload: { onceFeeCustDraftId },
    });
    this.getList(nowPage, pageNum, onceFeeCustDraftId);
  };

  // 客户名称
  getData = (value, id) => {
    const { form, dispatch } = this.props;
    if (id) {
      form.setFieldsValue({ [id]: value });
      this.setState({ [id]: value });
    }
    dispatch({
      type: 'oncechargecs/getCustcontList',
      payload: { value },
    }).then(res => {
      if (res.success && res.data.length) {
        this.setState({ contList: res.data });
      } else {
        this.setState({ contList: [] });
      }
    });
  };

  // 选择收费方式
  changeCharge = e => {
    this.setState({ feeWayid: e, chargeType: e });
  };

  // 新增修改提交数据
  submitModalData = () => {
    const { form, dispatch, onceFeeCustDraftId } = this.props;
    const { productData, pdIdid, idType } = this.state;
    const getFieldsList = form.getFieldsValue();
    form.validateFieldsAndScroll(err => {
      if (!err) {
        const submitData = {
          feeYm: productData.feeYm ? productData.feeYm : null,
          pdId: productData.pdId,
          feeWay: productData.feeWay,
          custId: productData.custId,
          custContId: productData.custContId,
          onceFeeCustDraftId,

          onceFeeCustDet: {
            empName: getFieldsList.moName && getFieldsList.moName.label,
            idType,
            idNo: getFieldsList.idnoNumber,
            perAmo: getFieldsList.moperAmuout, //   个人金额 perAmo
            comAmo: getFieldsList.entAmount, // 企业金额 comAmo
            fee: getFieldsList.moService, // 服务费 fee
            remark: getFieldsList.remarkTwo,
          },
        };

        if (
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
        ) {
          if (!getFieldsList.moperAmuout && !getFieldsList.entAmount && !getFieldsList.moService) {
            message.warning('个人金额、企业金额和服务费必须填写一项 ');
            return;
          }
        } else if (!getFieldsList.moService) {
          return;
        }

        dispatch({
          type: 'oncechargecs/submitModalInfo',
          payload: { submitData },
          callback: res => {
            if (res.success) {
              this.setState({
                modalVisible: false,
              });
              this.onceFee(res.data.onceFeeCustDraftId);
            } else {
              message.warning(res.message || '提交失败：服务端未知错误');
            }
          },
        });
      }
    });
  };

  // 渲染函数
  render() {
    const {
      feeWayid,
      ONCE_FEE_WAY,
      contList,
      isFlag,
      modalVisible,
      selectedRows,
      tableBlock,
      selectedRowKeys,
      isTableShow,
      pdIdid,
      onceChargeData,
    } = this.state;
    // 引入组件构造属性
    const { product, form, submitting, loading, empDataList, empNameList = [] } = this.props;
    // 引入表单数据绑定及检测功能
    const { getFieldDecorator } = form;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => <span>{(val && val.toFixed(2)) || '--'}</span>,
      },
      {
        title:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? '个人金额'
            : null,
        dataIndex:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? 'perAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005' ? (
            <span>{(val && val.toFixed(2)) || '--'}</span>
          ) : null,
      },
      {
        title:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? '企业金额'
            : null,
        dataIndex:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? 'comAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005' ? (
            <span>{(val && val.toFixed(2)) || '--'}</span>
          ) : null,
      },
      {
        title: '服务费',
        dataIndex: 'fee',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => <span>{(val && val.toFixed(2)) || '--'}</span>,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (
          <span className="editable-row-operations">
            <div>
              <a key="delete" onClick={() => this.delLsit(record)}>
                删除
              </a>
            </div>
          </span>
        ),
      },
    ];

    const formItemLayout = {
      labelCol: { md: { span: 6 } },
      wrapperCol: { md: { span: 15 } },
    };
    // 模态框配置
    const modalConfig = {
      title: '新增员工',
      visible: modalVisible,
      onOk: this.submitModalData,
      okText: '提交',
      loading,
      onCancel: this.cancelModal,
      destroyOnClose: true,
    };

    return (
      <Form layout="vertical">
        <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
          <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}>
            <Row gutter={64}>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem label="产品">
                  {getFieldDecorator('pdId', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select placeholder="请选择" disabled>
                      {product.map(item => (
                        <Option key={item.pdCode} value={item.pdCode}>
                          {item.pdName}
                        </Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem
                  label={
                    <Tooltip
                      placement="right"
                      title="单独收费指不进入收费账单，可直接做到款认领或财务收费；合并账单收费则是进入账单一起向客户收费。"
                    >
                      <span>收费方式</span>
                      <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                    </Tooltip>
                  }
                >
                  {getFieldDecorator('feeWay', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select
                      placeholder="请选择"
                      onChange={this.changeCharge}
                      disabled={
                        (onceChargeData && onceChargeData.feeWay === 2) ||
                        onceChargeData.feeSta !== 1
                      }
                    >
                      {ONCE_FEE_WAY.map(item => (
                        <Option key={item.itemCode} value={item.itemCode}>
                          {item.itemName}
                        </Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="客户名称">
                  {getFieldDecorator('custId', {
                    rules: [{ required: true, message: '请输入' }],
                  })(<Customer getData={this.getData} disabled />)}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem label="商务合同">
                  {getFieldDecorator('custContId', {
                    rules: [{ required: +feeWayid === 2, message: '请选择' }],
                  })(
                    <Select
                      placeholder="请选择"
                      disabled={
                        (onceChargeData && onceChargeData.feeWay === 2) ||
                        onceChargeData.feeSta !== 1
                      }
                    >
                      {contList.map(item => (
                        <Option key={item.contId} value={item.contId}>
                          {item.contName}
                        </Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                <FormItem label="业务年月">
                  {getFieldDecorator('busiYm', {
                    rules: [{ required: true, message: '请选择' }],
                  })(<MonthPicker format="YYYY-MM" style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="收费总金额">
                  {getFieldDecorator('feeAmo', {
                    rules: [
                      {
                        required: true,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </FormItem>
              </Col>
              {+feeWayid === 2 ? (
                <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                  <FormItem label="收费年月">
                    {getFieldDecorator('feeYm', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      <MonthPicker
                        format="YYYY-MM"
                        style={{ width: '100%' }}
                        disabled={
                          (onceChargeData && onceChargeData.feeWay === 2) ||
                          onceChargeData.feeSta !== 1
                        }
                        disabledDate={current => current < moment().subtract(1, 'months')}
                      />
                    )}
                  </FormItem>
                </Col>
              ) : null}
            </Row>
            <Row gutter={64}>
              <Col xl={{ span: 8 }} lg={8} md={8} sm={8}>
                <FormItem label="备注">
                  {getFieldDecorator('remark', {
                    rules: [{ required: false, message: '请输入' }],
                  })(<TextArea rows={4} maxLength={200} />)}
                </FormItem>
              </Col>
            </Row>
          </Card>
          <Card
            title={
              <p style={{ marginBottom: 0 }}>
                <div style={{ float: 'left' }}>是否有员工明细</div>
                <div style={{ float: 'left' }}>
                  {+isFlag === 2 ? (
                    <Switch
                      style={{ marginLeft: 20 }}
                      checkedChildren="有"
                      unCheckedChildren="无"
                      onChange={this.changeSwitch}
                      defaultChecked={false}
                    />
                  ) : (
                    <div>
                      {+isFlag === 2 ? (
                        <Switch
                          style={{ marginLeft: 20 }}
                          checkedChildren="有"
                          unCheckedChildren="无"
                          onChange={this.changeSwitch}
                          defaultChecked={false}
                        />
                      ) : (
                        <Switch
                          style={{ marginLeft: 20 }}
                          checkedChildren="有"
                          unCheckedChildren="无"
                          onChange={this.changeSwitch}
                          defaultChecked
                        />
                      )}
                    </div>
                  )}
                </div>
              </p>
            }
          >
            {isTableShow || +isFlag !== 2 ? (
              <div>
                <Button type="primary" style={{ marginRight: '20px' }} onClick={this.uploadFile}>
                  <UploadOutlined />
                  上传
                </Button>
                <Button onClick={this.Updownadd}>
                  <PlusOutlined />
                  新增
                </Button>
                {tableBlock ? (
                  <StandardTable
                    selectedRows={selectedRows}
                    selectedRowKeys={selectedRowKeys}
                    loading={loading}
                    data={empDataList}
                    rowKey="key"
                    columns={columns}
                    onSelectRow={this.handleSelectRows}
                    onChange={this.handleStandardTableChange}
                    style={{ marginTop: '16px' }}
                  />
                ) : (
                  <BatchUpload
                    closeUpload={() => {
                      this.setState({
                        tableBlock: true,
                      });
                    }}
                    finishClick={this.complete}
                    custOrSupp={1}
                    checkFormSubmit={() => this.uploadFile()}
                  />
                )}
              </div>
            ) : null}
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={this.cancel} style={{ marginRight: 10 }}>
              取消
            </Button>
            <Button type="primary" onClick={this.submitAll} loading={submitting}>
              提交
            </Button>
          </FooterToolbar>

          <Modal {...modalConfig}>
            <Form layout="horizontal">
              <FormItem {...formItemLayout} label="姓名">
                {getFieldDecorator('moName', {
                  rules: [{ required: true, message: '请输入' }],
                })(
                  <HOCSelect
                    placeholder="请输入关键字检索"
                    showSearch
                    showArrow={false}
                    filterOption={false}
                    onSearch={this.searchEmpName}
                    onSelect={this.selectEmpName}
                    labelInValue
                  >
                    {empNameList.length &&
                      empNameList.map(item => <Option key={item.empId}>{item.empName}</Option>)}
                  </HOCSelect>
                )}
              </FormItem>

              <FormItem {...formItemLayout} label="证件号">
                {getFieldDecorator('idnoNumber', {
                  rules: [{ required: true, message: '请输入' }],
                })(
                  <AutoComplete>
                    <Search
                      placeholder="请输入关键字检索"
                      onSearch={value => this.searchIdCode(value)}
                    />
                  </AutoComplete>
                )}
              </FormItem>
              {pdIdid === 'PDINF_0000000001' ||
              pdIdid === 'PDINF_0000000002' ||
              pdIdid === 'PDINF_0000000004' ||
              pdIdid === 'PDINF_0000000005' ? (
                <FormItem {...formItemLayout} label="个人金额">
                  {getFieldDecorator('moperAmuout', {
                    rules: [
                      {
                        required: false,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </FormItem>
              ) : null}
              {pdIdid === 'PDINF_0000000001' ||
              pdIdid === 'PDINF_0000000002' ||
              pdIdid === 'PDINF_0000000004' ||
              pdIdid === 'PDINF_0000000005' ? (
                <FormItem {...formItemLayout} label="企业金额">
                  {getFieldDecorator('entAmount', {
                    rules: [
                      {
                        required: false,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </FormItem>
              ) : null}
              <FormItem {...formItemLayout} label="服务费">
                {getFieldDecorator('moService', {
                  rules: [
                    {
                      required: !(
                        pdIdid === 'PDINF_0000000001' ||
                        pdIdid === 'PDINF_0000000002' ||
                        pdIdid === 'PDINF_0000000004' ||
                        pdIdid === 'PDINF_0000000005'
                      ),
                      message: '请输入',
                    },
                  ],
                })(
                  <InputNumber
                    style={{ width: '100%' }}
                    placeholder="请输入"
                    min={0}
                    max={9999999.99}
                    precision={2}
                  />
                )}
              </FormItem>

              <FormItem {...formItemLayout} label="备注">
                {getFieldDecorator('remarkTwo', {
                  rules: [{ required: false, message: '请输入' }],
                })(<Input placeholder="请输入" maxLength={65} />)}
              </FormItem>
              {pdIdid === 'PDINF_0000000001' ||
              pdIdid === 'PDINF_0000000002' ||
              pdIdid === 'PDINF_0000000004' ||
              pdIdid === 'PDINF_0000000005' ? (
                <FormItem
                  className={styles.markStyle}
                  {...formItemLayout}
                  label={<span style={{ color: '#ccc' }}>注</span>}
                >
                  <span style={{ color: '#ccc' }}>个人金额、企业金额和服务费必须填写一项</span>
                </FormItem>
              ) : null}
            </Form>
          </Modal>
        </PageHeaderWrapper>
      </Form>
    );
  }
}
export default AdvancedForm;
